<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				/*盒模型，字体，去掉超链接的下划线,去掉列表项标志*/
				padding: 0;
				margin: 0;
				font-size: 16px;
				color: #333;
				font-family: 微软雅黑;
				text-decoration: none;
				list-style: none;
			}
			/*1.左栏外层：宽高，背景颜色*/
			article{
				width: 235px;
				height: 470px;
				background-color: #949494;
			}
			/*2.左栏内层：ul li 等高，定宽， 垂直水平居中 颜色 相对定位【钩点位】*/
			article ul.sidebar li{
				height: 47px;
				width: 235px;
				bor der: 1px solid red;
				line-height: 47px;
				text-align: center;
				position: relative;
			}
			article ul.sidebar li:hover{
				background-color: #ffaa00;
			}
			/*3.弹出框   找到ul li第一行，加div .outer*/
			article ul.sidebar div.outer{
				width: 500px;
				height: 470px;
				border: 1px solid red;
				position: absolute;
				left: 235px;
				z-index: 999;
				/*学习jquery显示与隐藏属性：动态*/
				display: block;
			}
		</style>
	</head>
	<body>
		<!-- 左栏外围：语义化元素/结构化标记等同于div加别名形式，优点：有利于seo优化
		 article元素：独立的内容区域空间，使用场景：新闻，博客区域，左栏等-->
		 <article>
		 	<ul class="sidebar">
				<!-- 挂靠钩点位 -->
				<div class="outer"></div>
		 		<li>手机 平板 电话卡</li>
		 		<li>电视 盒子</li>
		 		<li>路由器 智能硬件</li>
		 		<li>移动电源 插线板</li>
		 		<li>耳机 音箱</li>
		 		<li>电池 存储卡</li>
		 		<li>保护套 后</li>
		 		<li>贴膜</li>
		 		<li>其他</li>
		 		<li>其他周边</li>
		 	</ul>
		 </article>
	</body>
</html>